<template>
    <div class="container">
        <div class="tag">
            <span
                class="item"
                :class="{ cur: cur == 'balance' }"
                @click="changeChart('balance')"
                >当日可用余额走势</span
            >
            <span
                class="item"
                :class="{ cur: cur == 'flow' }"
                @click="changeChart('flow')"
                >当日资金流入走势</span
            >
        </div>
        <div class="chart" style="width: 100%">
            <div ref="chart" style="height: 235px">Loading...</div>
        </div>
    </div>
</template>
<script>
import draw from "../script/draw";
export default {
    props: {
        dataSource: {
            type: Array,
            default: () => [],
        },
        dir: String,
    },
    data() {
        return {
            cur: "balance",
        };
    },
    watch: {
        dataSource(val) {
            if (Array.isArray(val) && val.length > 0) {
                this.$nextTick(() => {
                    draw({
                        container: this.$refs.chart,
                        data: val,
                        type: "balance",
                        dir: this.dir,
                    });
                });
            }
        },
    },

    methods: {
        changeChart(type) {
            this.cur = type;
            draw({
                container: this.$refs.chart,
                data: this.dataSource,
                type,
                dir: this.dir,
            });
        },
    },
};
</script>
<style scoped lang="scss">
@import "../style/var.scss";
.container {
    .tag {
        background: $color;
        // line-height: 34px;
        padding: 5px 10px;
        .item {
            font-size: 16px;
            color: #cccccc;
            font-weight: 400;
            cursor: pointer;
            padding: 4px 8px;
            margin-right: 21px;
            &.cur {
                border-radius: 4px;
                background: #35497c;
                display: inline-block;
                color: #fff;
            }
        }
    }
}
</style>
